<template>
  <div class="container">
    <el-form  label-position="left" ref="elForm" :model="form" :rules="rules" size="medium" label-width="100px">

      <div class="title">定时</div>
        <el-checkbox  v-model="timingCapture.enable" :true-label="1" :false-label="0">启用定时抓图</el-checkbox >
        <el-form-item label="图片格式" label-width="120px">
          <select v-model="timingCapture.compressParam.codecType" placeholder="">
            <option label="JPEG" value="JPEG"></option>
          </select>
        </el-form-item>
        <el-form-item label="分辨率" label-width="120px">
          <select disabled v-model="ratio1" placeholder="">
            <option label="384*288" :value="1"></option>
            <option label="640*480" :value="2"></option>
          </select>
        </el-form-item>
        <el-form-item label="图片质量" label-width="120px">
          <select v-model="timingCapture.compressParam.quality" placeholder="">
            <option label="低" value="low"></option>
            <option label="中" value="mid"></option>
            <option label="高" value="high"></option>
          </select>
        </el-form-item>
<!--        <el-form-item label="抓图时间间隔" label-width="120px">-->
<!--          <el-col :span="4">-->
<!--            <select v-model="form.region" placeholder="">-->
<!--              <option label="01" value="s"></option>-->
<!--              <option label="02" value="m"></option>-->
<!--            </select>-->
<!--          </el-col>-->
<!--          <el-col :span="3">-->
<!--            <select v-model="form.region" placeholder="">-->
<!--              <option label="毫秒" value="ms"></option>-->
<!--              <option label="秒" value="s"></option>-->
<!--              <option label="分" value="m"></option>-->
<!--              <option label="小时" value="h"></option>-->
<!--              <option label="天" value="d"></option>-->
<!--            </select>-->
<!--          </el-col>-->
<!--        </el-form-item>-->
      <div class="title">事件触发</div>
        <el-checkbox  v-model="eventCapture.enable" :true-label="1" :false-label="0">启用事件抓图</el-checkbox >
      <el-form-item label="图片格式" label-width="120px">
        <select v-model="eventCapture.compressParam.codecType" placeholder="">
          <option label="JPEG" value="JPEG"></option>
        </select>
      </el-form-item>
      <el-form-item label="分辨率" label-width="120px">
        <select disabled v-model="ratio2" placeholder="">
          <option label="384*288" :value="1"></option>
          <option label="640*480" :value="2"></option>
        </select>
      </el-form-item>
      <el-form-item label="图片质量" label-width="120px">
        <select v-model="eventCapture.compressParam.quality" placeholder="">
          <option label="低" value="low"></option>
          <option label="中" value="mid"></option>
          <option label="高" value="high"></option>
        </select>
      </el-form-item>
<!--      </el-form-item>-->
<!--      <el-form-item class="button">-->
        <el-button class="!mt-8" type="primary" @click="save" style="margin-left: 0px; width: 120px">保存</el-button>
<!--      </el-form-item>-->
    </el-form>
  </div>
</template>

<script>
  import {getsnapshotparam, snapshotparam} from "@/api/api";
  import {getSnapshotSchedule} from "@/api/api2";
export default {
  name: 'index',
  components: {
  },
  data() {
    return {
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      ratio1: 1,
      ratio2: 1,
      // 表单参数
      form: {

      },
      schedule: {

      },
      timingCapture: {
        "enable": 0,
        "compressParam":{
          "codecType": "JPEG",
          "width": 384,
          "height": 288,
          "quality": 80,
        }
      },
      eventCapture: {
        "enable": 0,
        "compressParam":{
          "codecType": "JPEG",
          "width": 384,
          "height": 288,
          "quality": 80,
        }
      },
      rules: {
      },
    }
  },
  created() {
    getsnapshotparam().then(res => {
      if (res.code === 0) {
        this.timingCapture = res.data.timeCapture;
        this.eventCapture = res.data.eventCapture;
        console.log(this.timingCapture)
        if (this.timingCapture.compressParam.width == 384 && this.timingCapture.compressParam.height == 288) {
          this.ratio1 = 1;
        } else if (this.timingCapture.compressParam.width == 640 && this.timingCapture.compressParam.height == 480) {
          this.ratio1 = 2;
        }
        if (this.eventCapture.compressParam.width == 384 && this.eventCapture.compressParam.height == 288) {
          this.ratio2 = 1;
        } else if (this.eventCapture.compressParam.width == 640 && this.eventCapture.compressParam.height == 480) {
          this.ratio2 = 2;
        }
      } else {
        this.$message({
          message: '获取失败',
          type: 'error'
        });
      }
    })

  },
  methods: {
    save(){
      if (this.ratio1 == 1) {
        this.timingCapture.compressParam.width = 384;
        this.timingCapture.compressParam.height = 288;
      } else if (this.ratio1 == 2) {
        this.timingCapture.compressParam.width = 640;
        this.timingCapture.compressParam.height = 480;
      }
      if (this.ratio2 == 1) {
        this.eventCapture.compressParam.width = 384;
        this.eventCapture.compressParam.height = 288;
      } else if (this.ratio2 == 2) {
        this.eventCapture.compressParam.width = 640;
        this.eventCapture.compressParam.height = 480;
      }
      snapshotparam({
        timeCapture: this.timingCapture,
        eventCapture: this.eventCapture,
      }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '保存失败',
            type: 'error'
          });
        }
      })
    },
  }
}
</script>

<style scoped>
.container {
  //margin-left: 15%;
  //margin-top: 5%;
}
.week-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
  flex-direction: row;
}

.day-schedule {
  flex: 0 0 35%; /* Each .day-schedule will try to take up half the width of its container */
  max-width: 50%; /* Ensures that the .day-schedule does not exceed half the width */
  box-sizing: border-box;
}

.block {
  display: flex;
  margin-top: 10px;
}

@media (max-width: 600px) { /* Adjust the breakpoint as needed */
  .day-schedule {
    flex: 0 0 100%; /* On smaller screens, the .day-schedule will take the full width */
    max-width: 100%;
  }
}
.button {
  margin-left: 15%;
}
.el-form-item .el-form-item {
  margin-bottom: 10px;
}
select {
  width: 202px;
}


.title  {
  background-color: #F2F2F2;
  font-weight: 700;
  //margin-top: 10px;
}

.title {
  background-color: #F2F2F2;
  font-weight: 700;
  padding-left: 15px;
  //margin-top: 10px;
  margin-bottom: 5px;
}
.title {
  height: 30px;
  line-height: 30px;
}
</style>
